import React,{useState} from 'react';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import '../static/css/Admin.css'
import AddArticle from '../Pages/AddArticle';
import ArticleList from '../Pages/ArticleList';
import {Route} from 'react-router-dom'
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
// antd 布局代码拷贝在写成hooks
// class AdminIndex extends React.Component {
//   state = {
//     collapsed: false,
//   };

//   onCollapse = collapsed => {
//     console.log(collapsed);
//     this.setState({ collapsed });
//   };

//   render() {
//     return (
//       <Layout style={{ minHeight: '100vh' }}>
//         <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
//           <div className="logo" />
//           <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
//             <Menu.Item key="1">
//               <Icon type="pie-chart" />
//               <span>Option 1</span>
//             </Menu.Item>
//             <Menu.Item key="2">
//               <Icon type="desktop" />
//               <span>Option 2</span>
//             </Menu.Item>
//             <SubMenu
//               key="sub1"
//               title={
//                 <span>
//                   <Icon type="user" />
//                   <span>User</span>
//                 </span>
//               }
//             >
//               <Menu.Item key="3">Tom</Menu.Item>
//               <Menu.Item key="4">Bill</Menu.Item>
//               <Menu.Item key="5">Alex</Menu.Item>
//             </SubMenu>
//             <SubMenu
//               key="sub2"
//               title={
//                 <span>
//                   <Icon type="team" />
//                   <span>Team</span>
//                 </span>
//               }
//             >
//               <Menu.Item key="6">Team 1</Menu.Item>
//               <Menu.Item key="8">Team 2</Menu.Item>
//             </SubMenu>
//             <Menu.Item key="9">
//               <Icon type="file" />
//               <span>File</span>
//             </Menu.Item>
//           </Menu>
//         </Sider>
//         <Layout>
//           <Header style={{ background: '#fff', padding: 0 }} />
//           <Content style={{ margin: '0 16px' }}>
//             <Breadcrumb style={{ margin: '16px 0' }}>
//               <Breadcrumb.Item>User</Breadcrumb.Item>
//               <Breadcrumb.Item>Bill</Breadcrumb.Item>
//             </Breadcrumb>
//             <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>Bill is a cat.</div>
//           </Content>
//           <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
//         </Layout>
//       </Layout>
//     );
//   }
// }

// 
function AdminIndex(props){
  console.log(props)
    const [collapsed,setCollapsed]=useState(false)

    const onCollapse= collapsed => {
        setCollapsed(collapsed)
    };
    const handleClickArticle=(e)=>{
            // 路由跳转
            console.log(e,e.item.props)

            if (e.key=='addArticle') {
              console.log(111)
              props.history.push('/index/add')
            }else{
              props.history.push('/index/list')
            }
    }
    return (
        <Layout style={{ minHeight: '100vh' }}>
          <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
            <div className="logo" />
            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" onClick={handleClickArticle}>
              <Menu.Item key="1">
                <Icon type="pie-chart" />
                <span>工作台</span>
              </Menu.Item>
              <Menu.Item key="2">
                <Icon type="desktop" />
                <span>添加文章</span>
              </Menu.Item>
              <SubMenu
                key="sub1"
                title={
                  <span>
                    <Icon type="user" />
                    <span>文章管理</span>
                  </span>
                }
              >
                <Menu.Item key="addArticle">添加文章</Menu.Item>
                <Menu.Item key="articleList">文章列表</Menu.Item>
              </SubMenu>
              <Menu.Item key="5">
                  <Icon type='file'></Icon>
                  留言管理</Menu.Item>
            
            </Menu>
          </Sider>
          <Layout>
            <Header style={{ background: '#fff', padding: 0 }} />
            <Content style={{ margin: '0 16px' }}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>后台管理系统</Breadcrumb.Item>
                <Breadcrumb.Item>工作台</Breadcrumb.Item>
              </Breadcrumb>
              <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
                  <div>
                    {/* 增加文章组件 */}
                    <Route path='/index/' exact component={AddArticle}></Route>
                    <Route path='/index/add' exact component={AddArticle}></Route>
                    <Route path='/index/save/:id' exact component={AddArticle}></Route>
                   {/* 文章列表组件 */}
                  <Route path='/index/list' exact component={ArticleList}></Route>
                  </div>
                  {/* 首页进入字段加路由渲染 exact：/index/1,不行*/}
                 </div>
            </Content>
            <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
          </Layout>
        </Layout>
      );
}

export default AdminIndex